<template>
    <div>
        <div>
            <div>9月19日</div>
            
             <el-row :gutter="20">
                <el-col :span="8"  v-for="item in topData" :key='item.id'>
                    <div style="color:#ff6900;font-weight:700" class="grid-content bg-purple">{{item.num}}</div>
                    <div style="color:#ff6900;font-weight:700" class="grid-content bg-purple">{{item.name}}</div>
                </el-col>
            </el-row>
        </div>
        

       
        
        <div>
            <div>截至：{{endTime}}</div>
            
            <el-row :gutter="20">
                <el-col :span="8"  v-for="item in listData" :key='item.id'>
                    <div style="color:#ff6900;font-weight:700" class="grid-content bg-purple">{{item.num}}</div>
                    <div style="color:#ff6900;font-weight:700" class="grid-content bg-purple">{{item.name}}</div>
                </el-col>
            </el-row>
            
        </div>
        <div class="table">
            <div>国内疫情</div>
            <el-row>
                <el-col :span="4"><div style="backgtound-color:red" class="grid-content bg-purple">地区：</div></el-col>
                <el-col :span="4"><div class="grid-content bg-purple-light">新增确诊：</div></el-col>
                <el-col :span="4"><div class="grid-content bg-purple">新增疑似：</div></el-col>
                <el-col :span="4"><div class="grid-content bg-purple-light">新增死亡：</div></el-col>
                <el-col :span="4"><div class="grid-content bg-purple">新增治愈：</div></el-col>
                <el-col :span="4"><div class="grid-content bg-purple-light">境外输入：</div></el-col>
            </el-row>
            <el-row class="bottom_div" v-for="item in tableData" :key='item.id'>
                <el-col :span="4"><div class="grid-content ">{{item.province}}</div></el-col>
                <el-col :span="4"><div class="grid-content ">{{item.confirmed}}</div></el-col>
                <el-col :span="4"><div class="grid-content ">{{item.suspected}}</div></el-col>
                <el-col :span="4"><div class="grid-content ">{{item.dead}}</div></el-col>
                <el-col :span="4"><div class="grid-content ">{{item.cure}}</div></el-col>
                <el-col :span="4"><div class="grid-content ">{{item.outside}}</div></el-col>
            </el-row>
        </div>
        <div>
            
            <div>最新进展</div>
            <div style="background-color:#f8f8f8;padding:20px 10px;" v-for ="item in latest_news" :key='item.id' @click='showDetail(item)'>
                <div class="circle"></div>
                <div class="tag">最新</div>
                 <div class="time"> {{item.publishTime | dateFNT}}</div>
                 <div class="content" >{{item.title}}</div>
            </div>
        
        </div>
        
        <!-- 模态框 -->
            <el-dialog title="新闻资讯" :visible.sync="dialogTableVisible">
                <!-- v-html可以将变量中的标签解析出来 -->
               <div v-html='dialogData.content'>{{dialogData.content}}</div>
           
            </el-dialog>

    </div>
</template>
<script>
import axios from '@/http/axios'
import moment from 'moment'
export default {
    data(){
        return{
            dialogTableVisible:false,
            dialogData:{},
            params:{
                page:1,
                pageSize:10000,
                
            },
            listData:[],
            endTime:'',
            // 表格数据
            tableData:[],
            latest_news:[],
            topData:[],
           
           
        }
    },
    filters:{
        dateFNT(str){
            return moment(str).format('YYYY 年 MM 月 DD 日')
        }
    },

    created(){
        this.queryAll()
        this.queryNews()
        this.xinzeng()
    },
    methods:{

        // 显示新闻详情
        showDetail(item){
            // 将当前行的值赋值给模态框的数据
            this.dialogTableVisible=true
            this.dialogData=item
        },
        queryNews(){
            let obj={
                page:1,
                pageSize:1000,
                categoryId:3
            }
            axios({
                url:'http://121.199.29.84:8001/article/pageQuery',
                method:'get',
                params:obj,

            }).then((res)=>{
                this.latest_news=res.data.data.list
            })
        },


        xinzeng(){
            axios({
                url:'http://121.199.29.84:8001/epidemic/pageQuery',
                method:'get',
                params:this.params,

            }).then((res)=>{
                // console.log(res)
                // console.log(dateFNT())
                var inTime=moment(1600397699934).format('YYYY-MM-DD')
                var new_confirmed=0;
                var new_outside=0;
                var bentu=0;
                var a='';
                
                // console.log(inTime)
                    // console.log(res.data.data.list)
                res.data.data.list.forEach((item)=>{
                    // console.log(item.inputTime)
                    a=moment(item.inputTime).format('YYYY-MM-DD')
                    // console.log(a)
                    if(a==inTime){
                        new_confirmed+=item.confirmed
                        new_outside+=item.outside
                        bentu=new_confirmed-new_outside
                        
                    }
                })
                var obj1={
                    id:1,
                    name:'新增确认',
                    num:new_confirmed
                }
                var obj2={
                    id:2,
                    name:'本土新增',
                    num:bentu
                }
                var obj3={
                    id:3,
                    name:'境外输入',
                    num:new_outside
                }
                this.topData.push(obj1,obj2,obj3)
            })
        },

        queryAll(){
            axios({
                url:'http://121.199.29.84:8001/epidemic/pageQuery',
                method:'get',
                params:this.params,
            }).then((res)=>{
                // 封装时间
                this.endTime=moment(res.data.data.list[0].inputTime).format('YYYY 年 MM 月 DD 日 HH 时 mm 分 ss 秒')
                //封装表格数据
                this.tableData=res.data.data.list
                // 封装显示的数据
                var confirmed_total =0;
                var dead_total =0;
                var suspected_total=0;
                var cure_total=0;
                var outside_total=0;
                var severe_total=0;
                res.data.data.list.forEach((item)=>{
                    confirmed_total +=item.confirmed
                    suspected_total+=item.suspected
                    cure_total+=item.cure
                    outside_total+=item.outside
                    dead_total+=item.dead
                    severe_total+=item.severe

                    
                })
                var obj1={
                    id:1,
                    name:'现有确诊',
                    num:confirmed_total
                }
                var obj2={
                    id:2,
                    name:'现有重症',
                    num:suspected_total
                }
                var obj3={
                    id:3,
                    name:'累计境外输入',
                    num:outside_total
                }
                var obj4={
                    id:4,
                    name:'累计存活',
                    num:cure_total

                }
                var obj5={
                    id:5,
                    name:'累计死亡',
                    num:dead_total
                }
                var obj6={
                    id:6,
                    name:'累计出院',
                    num:severe_total
                }
                this.listData.push(obj1,obj2,obj3,obj4,obj5,obj6)
            })
        }
    }
}
</script>

<style>
.content{
    margin-top:10px;
    background-color: white;
    padding: 10px;
    border-radius: 10px;
}
.circle{
    height: 10px;
    width: 10px;
    border-radius: 50%;
    background-color: blue;
}
.tag{
    background-color: red;
    font-size:14px;
    color:white;
    padding:4px;
    border-radius: 5px;
}
.time{
    font-weight: 600;

}
.circle,.tag,.time{
    display: inline-block;
    margin-left: 10px;
}
.bottom_div div{
    border-bottom: 1px solid #ededed;
}
.table.el-row{
    margin-bottom: 0;
}
.table.el-col{
    margin-bottom: 0;
}
  .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
    margin-bottom: 10px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    /* border-radius: 4px; */
    min-height: 36px;
    line-height: 36px;
    text-align: center;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>
